import BScroll from 'better-scroll'
import {getData} from '../models/fetch'
import homeTpl from '../views/home.html'
import homeListTpl from '../views/home-list.html'

async function render(){
    //首次加载home页面
    $('main').html(homeTpl)
    //点击切换home-nav样式
    $('#home-nav').on('click','li',function(){
        $(this).addClass('active').siblings().removeClass('active');
    })
    //点击home-list的title切换样式
    $('.tab-title').on('click','span',function(){
        $(this).addClass('active').siblings().removeClass('active');
    })
    //点击搜索框打开目录
    $('header a').on('click',function(){
        $(this).siblings('.menu').css({
            left:'15%',
        })
        // $(this).animate({
        //     right:'85%'
        //     }, 500, 'ease-in')
    })
    
    let res = await getData('/api/v1/deal/dealactlist?card_id=4057&page=1&page_key=1560339120&platform=wap&client_v=1.0&user_tag_id=0&source=touch&site=bj')
    // let menu = await getData('/group/index/requestDelegate?url=http%3A%2F%2Fmobile.jumei.com%2Fmsapi%2Fmall%2Fallcategories.json')
    // console.log(menu)
    let data = res.result.item_list;
    //通过请求的goodsList用template渲染页面
    let renderHomeTpl = template.render(homeListTpl, {data})
    $('.goods-list').html(renderHomeTpl)

    let bscroll = new BScroll('#home-list',{
        scrollY: true,
        click: true,
        probeType: 3
    })

    //上拉加载下拉刷新功能
    updownRender(bscroll,data)
}
function updownRender(bscroll,data){
    let list = data,
        pageNum = 1;

    bscroll.scrollTo(0, -40)

    bscroll.on('scroll', function () {
        let y = this.y
        let maxY = this.maxScrollY - y

        //下拉加载
        if (y >= 0) {
            $(".arrow img").eq(0).attr("class","up")
        }
        //上拉刷新
        if (maxY >= 0) {
            $(".arrow img").eq(1).attr('class', 'down')
        }
    })
    bscroll.on('scrollEnd',async function(){
        let y = this.y
        let maxY = this.maxScrollY - y
        //每次下拉加载取新一页的前两条数据 
        if (y >= -40 && y < 0){
            this.scrollTo(0, -40)
        }else if (y >= 0){ 
            $(".arrow img").attr('src','/images/ajax-loader.gif')
            pageNum++
            let res = await getData(`/api/v1/deal/dealactlist?card_id=4057&page=${pageNum}&page_key=1560339120&platform=wap&client_v=1.0&user_tag_id=0&source=touch&site=bj`)
            let data = [...res.result.item_list.slice(0,2), ...list]
            list = data
            let renderHomeTpl = template.render(homeListTpl, {data})
            $('.goods-list').html(renderHomeTpl)

            this.scrollTo(0, -40)
            $(".arrow img").eq(0).removeClass('up')
            $(".arrow img").attr('src', '/images/arrow.png')
        }
        //每次上拉刷新取新一页的所有数据 
        if(maxY > -40 && maxY < 0){
            this.scrollTo(0, this.maxScrollY+40)
        }else if(maxY >= 0){
            $(".arrow img").attr('src','/images/ajax-loader.gif')
            pageNum++
            let res = await getData(`/api/v1/deal/dealactlist?card_id=4057&page=${pageNum}&page_key=1560339120&platform=wap&client_v=1.0&user_tag_id=0&source=touch&site=bj`)
            let data = [...list,...res.result.item_list]
            list = data
            let renderHomeTpl = template.render(homeListTpl, {data})
            $('.goods-list').html(renderHomeTpl)

            $(".arrow img").eq(1).removeClass('down')
            $(".arrow img").attr('src', '/images/arrow.png')
        }
    })
}

export default{
    render
}